<template>
  <section id="schoolUpdate">
    <div class="detailPage">
      <div class="studentImg">
        <el-upload
          disabled
          class="avatar-uploader"
          action
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div class="headerBG">
            <img :src="studentHeader" class="avatar" />
          </div>
        </el-upload>
        <!-- <p style="font-size:12px;font-weight:300;">点击图片，上传照片，请上传小于5M的照片</p> -->
      </div>
      <!-- :rules="basicInfoFormRules" -->
      <el-form
        :model="basicInfoForm"
        status-icon
        ref="basicInfoForm"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-row :gutter="150">
          <el-col :span="24">
            <h2 class="titleH">基本信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学号" prop="sn">
              <el-input disabled size="small" type="text" v-model="basicInfoForm.sn" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <el-input disabled size="small" type="text" v-model="basicInfoForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.gender"
                placeholder="请选择"
                value-key="id"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学院" prop="colleges">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.colleges"
                placeholder="学院"
                value-key="id"
                @change="majorSelect('change')"
              >
                <el-option
                  v-for="item in collegeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年级" prop="grade">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.grade"
                placeholder="年级"
                @change="clazzSelect('change')"
              >
                <el-option
                  v-for="item in gradeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="majors">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.majors"
                placeholder="专业"
                value-key="id"
                @change="clazzSelect('change')"
              >
                <el-option
                  v-for="item in majorOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级" prop="classes">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.classes"
                placeholder="班级"
                value-key="id"
              >
                <el-option
                  v-for="item in clazzOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族" prop="nationId">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.nationId"
                placeholder="民族"
                value-key="id"
              >
                <el-option
                  v-for="item in nationOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="籍贯" prop="nativePlaceId">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.nativePlaceId"
                placeholder="籍贯"
                value-key="name"
              >
                <el-option
                  v-for="item in nativePlaceOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select
                size="small"
                v-model="basicInfoForm.politicalStatus"
                placeholder="政治面貌"
                value-key="id"
              >
                <el-option
                  v-for="item in politicsStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口类型" prop="nodeType">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.nodeType"
                placeholder="户口类型"
                value-key="id"
              >
                <el-option
                  v-for="item in nodetypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件类型" prop="idType">
              <el-select
                @change="idTypeChange"
                size="small"
                disabled
                v-model="basicInfoForm.idType"
                placeholder="身份证件类型"
                value-key="id"
              >
                <el-option
                  v-for="item in idTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号" prop="idNumber">
              <el-input
                :maxlength="20"
                disabled
                @change="idNumChange"
                size="small"
                type="text"
                v-model="basicInfoForm.idNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生状态" prop="status">
              <el-select
                size="small"
                disabled
                v-model="basicInfoForm.status"
                placeholder="学生状态"
                value-key="id"
              >
                <el-option
                  v-for="item in studentStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学制" >
              <el-input size="small" disabled type="text" v-model="basicInfoForm.studentLength" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生源地" prop="sourcePlace">
              <el-select
                size="small"
                v-model="basicInfoForm.sourcePlace"
                placeholder="生源地"
                disabled
                value-key="id"
              >
                <el-option
                  v-for="item in nativePlaceOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行账户" prop="bankCard">
              <el-input
                :maxlength="19"
                size="small"
                type="number"
                disabled
                v-model="basicInfoForm.bankCard"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生在校职务" prop="position">
              <el-input
                :maxlength="30"
                size="small"
                type="text"
                v-model="basicInfoForm.position"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区" prop="campus">
              <el-select
                size="small"
                v-model="basicInfoForm.campus"
                placeholder="校区"
                value-key="id"
              >
                <el-option
                  v-for="item in campusNameOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宿舍" prop="dorm">
              <el-input
                :maxlength="50"
                size="small"
                type="text"
                v-model="basicInfoForm.dorm"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              <el-input
                :maxlength="11"
                size="small"
                type="text"
                disabled
                v-model="basicInfoForm.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="email">
              <el-input
                :maxlength="30"
                size="small"
                type="text"
                disabled
                v-model="basicInfoForm.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="qq">
              <el-input
                :maxlength="20"
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.qq"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker
                style="width:100%"
                disabled
                size="small"
                v-model="basicInfoForm.birthDate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人健康状况" prop="healthStatus">
              <!-- <el-input size="small" type="text" v-model="basicInfoForm.healthStatus" autocomplete="off"></el-input> -->
              <el-select disabled size="small" v-model="basicInfoForm.healthStatus" placeholder="个人健康状况">
                <el-option label="健康" value="健康"></el-option>
                <el-option label="特异体质" value="特异体质"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="titleH">入学信息</h2>
          </el-col>
         <el-col :span="8">
            <el-form-item label="入学时间" prop="checkPass">
              <el-date-picker
                size="small"
                style="width:100%"
                disabled
                v-model="basicInfoForm.enterDate"
                type="date"
                placeholder="选择入学时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前户口所在地" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.registeredResidence"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前就读中学" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchool"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.postalCode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书家庭地址" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeHomeAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人姓名" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseeName "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人电话" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseePhone "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考考生号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.examNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考成绩" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排位" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rank"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考生科类名称" prop="checkPass">
            <el-select disabled style="width:100%" placeholder="" v-model="basicInfoForm.objectType" size="small">
              <el-option label="理科" :value="1"></el-option>
              <el-option label="文科" :value="2"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">高考志愿</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿1" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerOne "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿2" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerTwo "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿3" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerThree "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿4" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFour "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿5" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFive "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿6" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerSix "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投档志愿" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.deliveryVolunteer "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服从" prop="checkPass">
              <el-select disabled placeholder="" style="width:100%" v-model="basicInfoForm.obey" size="small">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">体检信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身高" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体重" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.weight"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="右视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rightVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="左视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.leftVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体检结论" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.physicalExamConclusion"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="转氨酶" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.transaminase"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表抗原" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.surfaceAntigen"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="色觉检查" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.colourSense"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收缩压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.systolicPressure"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="舒张压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.diastolicPressure "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="titleH">
              紧急联系人
              <!-- <el-button size="small" @click="addsos" type="text" style="display:inline-block;">+添加</el-button> -->
            </h2>
          </el-col>
          <el-col :span="24">
            <el-table :data="basicInfoForm.emergencyContactList">
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column label="姓名">
                <template slot-scope="scope">
                  <el-form-item
                    style="height:50px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].name'"
                  >
                    <el-input disabled v-model="scope.row.name" size="small" :maxlength="255" :minlength="1"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="关系">
                <template slot-scope="scope">
                  <el-form-item
                    style="height:50px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].relation'"
                  >
                    <el-input
                      v-model="scope.row.relation"
                      size="small"
                      :maxlength="10"
                      :minlength="1"
                      disabled
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="电话">
                <template slot-scope="scope">
                  <el-form-item
                    style="height:50px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].phone'"
                  >
                    <el-input
                      disabled
                      v-model="scope.row.phone"
                      size="small"
                      :maxlength="13"
                      :minlength="13"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    style=" margin-bottom: 18px"
                    @click="delsos(scope.row.id, scope.$index)"
                    type="text"
                  >删除</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-form-item style="text-align:center;margin-top:30px;">
              <el-button @click="resetForm('basicInfoForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('basicInfoForm')">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </section>
</template>
<script>
import defaultHeader from '@/assets/images/default.png'
import manHeader from '@/assets/images/touxiang.png'
import womanHeader from '@/assets/images/womentouxiang.png'
import { common as commonService } from '@api/index'
import { isCardNo, isMobilePhone, isEmailNum, isQQNum } from '@/tools/utils'
export default {
  name: 'schoolUpdate',
  data () {
    var isIdNumber = (rule, value, callback) => {
      if (this.basicInfoForm.idType.id === 1 && !isCardNo(value)) {
        callback(new Error('请输入正确的身份证号码'))
      } else if (
        this.basicInfoForm.idType.id === 1 &&
        new Date(
          `${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`
        ).getTime() > Date.now()
      ) {
        callback(new Error('请输入正确的身份证号码'))
      } else if (
        this.basicInfoForm.idType.id === 1 &&
        isNaN(
          new Date(
            `${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(
              12,
              14
            )}`
          ).getTime()
        )
      ) {
        callback(new Error('请输入正确的身份证号码'))
      } else {
        callback()
      }
    }
    var isPhone = (rule, value, callback) => {
      if (!isMobilePhone(value)) {
        callback(new Error('请按照系统要求填写正确的手机号'))
      } else {
        callback()
      }
    }
    var isEmail = (rule, value, callback) => {
      if (!isEmailNum(value)) {
        callback(new Error('请按照系统要求填写正确的邮箱地址'))
      } else {
        callback()
      }
    }
    var isQQ = (rule, value, callback) => {
      if (!isQQNum(value)) {
        callback(new Error('请按照系统要求填写正确的QQ号'))
      } else {
        callback()
      }
    }
    var genderValidator = (rule, value, callback) => {
      if (value.id === 1 || value.id === 0) {
        callback()
      } else {
        callback(new Error('请选择性别'))
      }
    }
    var isNullValidator = (rule, value, callback) => {
      if (typeof value === 'object') {
        if (value && value.name) {
          callback()
        } else {
          callback(new Error('此字段必填'))
        }
      } else {
        if (value) {
          callback()
        } else {
          callback(new Error('此字段必填'))
        }
      }
    }
    var isHighSchoolScore = (rule, value, callback) => {
      if (value < 0 || value > 750) {
        callback(new Error('请输入0-750之间的数字'))
      } else {
        callback()
      }
    }

    return {
      formSaveTimer: null,
      isPhone,
      imageUrl: '',
      // 学院
      collegeOptions: [],
      majorOptions: [],
      // 年级
      gradeOptions: [],
      // 班级
      clazzOptions: [],
      // 生源地
      nativePlaceOptions: [],
      // 民族
      nationOptions: [],
      // 政治面貌
      politicsStatusOptions: [],
      // 性别
      sexOptions: [
        {
          name: '男',
          id: 1
        },
        {
          name: '女',
          id: 0
        }
      ],
      // 户口类型
      nodetypeOptions: [
        {
          id: 1,
          name: '农业'
        },
        {
          id: 0,
          name: '非农业'
        }
      ],
      idTypeOptions: [],
      // 学生状态
      studentStatusOptions: [],
      // 校区
      campusNameOptions: [],
      basicInfoForm: {
        sn: null,
        emergencyContactList: [],
        majors: { name: null, id: null },
        colleges: { name: null, id: null },
        classes: { name: null, id: null },
        idType: { name: null, id: null },
        status: { name: null, id: null },
        campus: { name: null, id: null },
        gender: { name: null, id: null },
        politicalStatus: { name: null, id: null },
        nodeType: { name: null, id: null },
        position: ''
      },
      isaaa: false,
      basicInfoFormRules: {
        // sn: [
        //   {required: true, message: '请填写正确学号', trigger: 'blur'}
        // ],

        // nativePlaceId: {required: true, message: '请选择籍贯', trigger: 'blur'},
        // name: [
        //   {required: true, message: '请填写姓名', trigger: 'blur'},
        //   { min: 2, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        // ],
        gender: [
          // {required: true, message: '请选择性别', trigger: 'change'},
          { validator: genderValidator, trigger: 'blur' }
        ],
        politicalStatus: [
          // {required: true, message: '请选择政治面貌', trigger: 'blur'}
          // {required: true, message: '请选择政治面貌', trigger: 'change'}
        ],
        idNumber: [
          // {required: true, message: '请输入正确的身份证号码', trigger: 'blur'},
          { validator: isIdNumber, trigger: 'blur' }
        ],
        // colleges: [
        //   {required: true, message: '请选择学院', trigger: 'blur'},
        //   {validator: isNullValidator, trigger: 'blur'}
        // ],
        // grade: [
        //   {required: true, message: '请选择年级', trigger: 'blur'},
        //   {validator: isNullValidator, trigger: 'blur'}
        // ],
        // majors: [
        //   {required: true, message: '请选择专业', trigger: 'blur'},
        //   {validator: isNullValidator, trigger: 'blur'}
        // ],
        // classes: [
        //   {required: true, message: '请选择班级', trigger: 'blur'},
        //   {validator: isNullValidator, trigger: 'blur'}
        // ],
        nationId: [
          // {required: true, message: '请选择民族', trigger: 'blur'},
          { validator: isNullValidator, trigger: 'blur' }
          // {required: true, message: '请选择民族', trigger: 'change'}
        ],
        nodeType: [
          // {required: true, message: '请选择户口类型', trigger: 'blur'}
          // {required: true, message: '请选择户口类型', trigger: 'change'}
        ],
        idType: [
          // {required: true, message: '请选择身份证件类型', trigger: 'blur'},
          { validator: isNullValidator, trigger: 'blur' }
          // {required: true, message: '请选择身份证件类型', trigger: 'change'}
        ],
        status: [
          // {required: true, message: '请选择学生状态', trigger: 'blur'},
          { validator: isNullValidator, trigger: 'blur' }
        ],
        sourcePlace: [
          // {required: true, message: '请选择生源地', trigger: 'blur'}
          // {validator: isNullValidator, trigger: 'blur'}
          // {required: true, message: '请选择生源地', trigger: 'change'}
        ],
        bankCard: [
          // {required: true, message: '请按照系统要求填写正确的银行账号', trigger: 'blur'},
          { max: 19, message: '银行账户不能大于19位', trigger: 'blur' }
          // {required: true, message: '请填写银行账户', trigger: 'change'}
        ],
        position: [
          // {required: true, message: '请填写职务', trigger: 'blur'}
        ],
        campus: [
          // {required: true, message: '请选择校区', trigger: 'blur'},
          { validator: isNullValidator, trigger: 'blur' }
          // {required: true, message: '请选择校区', trigger: 'change'}
        ],
        dorm: [
          // {required: true, message: '请按照系统要求填写正确的宿舍地址', trigger: 'blur'}
        ],
        phone: [
          // {required: true, message: '请填写手机号', trigger: 'blur'},
          { validator: isPhone, trigger: 'blur' }
        ],
        email: [
          // {required: true, message: '请填写邮箱', trigger: 'blur'},
          { validator: isEmail, trigger: 'blur' }
        ],
        qq: [
          // {required: true, message: '请填写qq', trigger: 'blur'},
          { validator: isQQ, trigger: 'blur' }
        ],
        highSchoolScore: [
          // {required: true, message: '高考成绩请输入0-750之间的数字', trigger: 'blur'},
          { validator: isHighSchoolScore, trigger: 'blur' }
        ],
        studentLength: [
          // {required: true, message: '请输入正确学制（如输入：3，4，5）', trigger: 'blur'}
        ],
        enterDate: [
          // {required: true, message: '请选择入学时间', trigger: 'blur'}
        ],
        birthDate: [
          // {required: true, message: '请选择生日', trigger: 'blur'}
          // {required: true, message: '请选择生日', trigger: 'change'}
        ],
        healthStatus: [
          // {required: true, message: '请填写个人健康状况', trigger: 'blur'}
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  props: ['studentBasicInfo'],
  computed: {
    // 根据性别换头像
    studentHeader: function () {
      if (this.basicInfoForm.picUrl) {
        // let rootUrl =
        //   window.location.href.indexOf('localhost') > -1
        //     ? 'uestc.xdbigdata.com'
        //     : window.location.href.split('/')[2]
        // rootUrl = '172.16.170.119'
        // let url = `http://${rootUrl}/${this.basicInfoForm.picUrl}`
        // return url
        return `/fastdfs-util/api/fastdfs/download/image?filePath=${this.basicInfoForm.picUrl}`
      } else if (
        this.basicInfoForm.gender.name === '未知' ||
        this.basicInfoForm.gender.id === -1
      ) {
        return defaultHeader
      } else if (
        this.basicInfoForm.gender.name === '男' ||
        this.basicInfoForm.gender.id === 1
      ) {
        return manHeader
      } else if (
        this.basicInfoForm.gender.name === '女' ||
        this.basicInfoForm.gender.id === 0
      ) {
        return womanHeader
      }
    },
    politicalStatus () {
      return this.basicInfoForm.politicalStatus
    }
  },
  mounted () {
    this.basicInfoForm = Object.assign({}, this.studentBasicInfo)
    // getFormDataLocal('updateStudentInfo', 'sn', this.basicInfoForm, ['name', 'gender', 'colleges', 'grade', 'majors', 'classes'])
    this.getCollegeOptions()
    this.gradeSelect()
    this.majorSelect()
    this.clazzSelect()
    this.nativePlaceSelect()
    this.nationSelect()
    this.politicsStatusSelect()
    this.getcardTypeList()
    this.getStudentStatus()
    this.getStudentCampus()
    // this.formSaveTimer = setInterval(() => {
    //   // this.$alert('表单信息已保存至本地，下次进入将自动加载', '提示', {
    //   //   confirmButtonText: '确定'})
    //   saveFormDataLocal('updateStudentInfo', this.basicInfoForm)
    // }, 1000 * 60 * 3)
  },
  destroyed () {
    clearInterval(this.formSaveTimer)
  },
  methods: {
    idTypeChange () {
      this.$refs.basicInfoForm.validateField('idNumber')
      this.idNumChange(this.basicInfoForm.idNumber)
    },
    idNumChange (value) {
      if (
        isCardNo(value) &&
        this.basicInfoForm.idType.id === 1 &&
        new Date(
          `${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`
        ).getTime() < Date.now()
      ) {
        this.basicInfoForm.birthDate = new Date(
          `${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`
        )
      }
    },
    // 添加紧急联系人
    addsos () {
      let len = this.basicInfoForm.emergencyContactList.length
      if (len > 5) {
        this.$message.error('紧急联系人数量超过上限')
      } else {
        this.basicInfoForm.emergencyContactList.push({
          name: '',
          relation: '',
          phone: ''
        })
      }
    },
    // 删除紧急联系人
    delsos (id, index) {
      this.$confirm('是否确认删除此紧急联系人？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id) {
          commonService()
            ._delsos(id)
            .then(res => {
              if (res.status) {
                this.$message.success('删除成功')
                this.basicInfoForm.emergencyContactList.splice(index, 1)
              }
            })
        } else {
          this.basicInfoForm.emergencyContactList.splice(index, 1)
        }
      })
    },
    //  ------------学院--------------------------
    getCollegeOptions () {
      commonService()
        ._findAllCollege()
        .then(res => {
          this.collegeOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.collegeOptions.push(params)
            })
          }
        })
    },
    // 选择专业
    majorSelect (params = null) {
      if (params === 'change') {
        this.basicInfoForm.grade = null

        this.basicInfoForm.majors = null
        this.basicInfoForm.majors = null

        this.basicInfoForm.classes = null
        this.clazzOptions = []
      }
      commonService()
        ._getMajordByCollege(this.basicInfoForm.colleges.id)
        .then(res => {
          this.majorOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.majorOptions.push(params)
            })
          }
        })
    },
    // 选择年级
    gradeSelect (params = null) {
      if (params === 'change') {
        this.basicInfoForm.majors = null
        this.basicInfoForm.majors = null

        this.basicInfoForm.classes = null
        this.basicInfoForm.classes = null
      }
      commonService()
        ._getAllGrades(this.basicInfoForm.colleges.id)
        .then(res => {
          this.gradeOptions = []
          if (res.status) {
            res.data
              .sort(function (a, b) {
                return a - b
              })
              .forEach(item => {
                let params = {
                  id: item.id,
                  name: item.name
                }
                this.gradeOptions.push(params)
              })
          }
        })
    },
    // 选择班级
    clazzSelect (params = null) {
      if (params === 'change') {
        this.basicInfoForm.classes = null
        this.basicInfoForm.classes = null
      }
      if (
        this.basicInfoForm.colleges &&
        this.basicInfoForm.majors &&
        this.basicInfoForm.colleges.id !== '' &&
        this.basicInfoForm.majors.id !== ''
      ) {
        commonService()
          ._getClassesByMajorAndGrade(
            this.basicInfoForm.majors.id,
            this.basicInfoForm.grade
          )
          .then(res => {
            this.clazzOptions = []
            if (res.status) {
              res.data.forEach(item => {
                let params = {
                  id: item.id,
                  name: item.name
                }
                this.clazzOptions.push(params)
              })
            }
          })
      }
    },
    // 选择生源地省份
    nativePlaceSelect () {
      commonService()
        ._findAllProvince()
        .then(res => {
          this.nativePlaceOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.nativePlaceOptions.push(params)
            })
          }
        })
    },
    // 选择民族
    nationSelect () {
      commonService()
        ._findAllNation()
        .then(res => {
          this.nationOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.nationOptions.push(params)
            })
          }
        })
    },
    // 政治面貌
    politicsStatusSelect () {
      commonService()
        ._getAllPoliticsStatus()
        .then(res => {
          this.politicsStatusOptions = []
          if (res.status) {
            res.data.forEach(item => {
              let params = {
                id: item.id,
                name: item.name
              }
              this.politicsStatusOptions.push(params)
            })
          }
        })
    },
    // 身份证件类型
    getcardTypeList () {
      this.idTypeOptions = []
      commonService()
        ._getcardTypeList()
        .then(res => {
          this.idTypeOptions = []
          if (res.status && res.data) {
            this.idTypeOptions.push(...res.data)
          }
        })
    },
    // 学生状态
    getStudentStatus () {
      this.studentStatusOptions = []
      commonService()
        ._getStudentStatus()
        .then(res => {
          this.studentStatusOptions = []
          if (res.status && res.data) {
            this.studentStatusOptions.push(...res.data)
            console.log(this.studentStatusOptions)
          }
        })
    },
    // 校区
    getStudentCampus () {
      this.campusNameOptions = []
      commonService()
        ._getStudentCampus()
        .then(res => {
          this.campusNameOptions = []
          if (res.status && res.data) {
            this.campusNameOptions.push(...res.data)
          }
        })
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            sn: this.basicInfoForm.sn,
            politicalStatus: this.basicInfoForm.politicalStatus.id,

            position: this.basicInfoForm.position,
            campusId: this.basicInfoForm.campus.id,

            dorm: this.basicInfoForm.dorm,

            emergencyContactList: this.basicInfoForm.emergencyContactList
          }
          console.log(params)
          commonService()
            ._updateStudentInfo(params)
            .then(res => {
              if (res.status) {
                this.$message.success('修改成功！')
                this.$emit('cancleUpdate')
              }
            })
        } else {
          this.$confirm('当前还有数据为空，请填写所有数据！', '个人信息', {
            cancelButtonText: '返回',
            showConfirmButton: false,
            type: 'warning'
          })
            .then(() => {})
            .catch(() => {})
          return false
        }
      })
    },
    resetForm (formName) {
      // clearFormDataLocal('updateStudentInfo')
      this.$refs[formName].resetFields()
      this.$emit('cancleUpdate')
    },
    beforeAvatarUpload (file) {
      // if ((file.type).indexOf('image/') === -1) {
      //   this.$message('请上传图片!')
      // } else if (file.size / 1024 / 1024 > 5) {
      //   this.$message('请上传小于5M图片!')
      // }
    },
    handleAvatarSuccess (response, file) {
      // this.basicInfoForm.picUrl = URL.createObjectURL(file.raw)
      // this.basicInfoForm.picUrl = response.data
    }
  }
}
</script>
<style lang="less" scoped>
.sub-title{
  font-size: 15px;
  margin-top: 8px;
}
/deep/.el-input.is-disabled .el-input__inner {
  background-color: #e1e1e1;
}
.el-select {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .headerBG {
    width: 120px;
    height: 150px;
    text-align: center;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 150px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100px;
  display: block;
}
.titleH {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
